<template>
  <div style="width: 100%; position: relative; border-width: 0;" :style="{
    borderColor: tool.getThemeColor('input.outline'),
  }">
    <div v-if="label" style="width: 100%;padding: 8px 12px;font-size: 15px;" :style="{
      color: tool.getThemeColor('input.labelColor'),
    }">
      {{ label }}
    </div>
    <input :type="type" :value="modelValue" @input="onInput" :style="{
      color: tool.getThemeColor('input.color'),
      backgroundColor: tool.getThemeColor('input.bg'),
    }" class="ipt" type="text" />
  </div>
</template>

<script setup>
import { defineEmits, defineProps } from 'vue'
import tool from '../tool'

// 接收 v-model 的值
const props = defineProps({
  modelValue: String,
  label: String,
  type: {
    type: String,
    default: 'text'
  }
})

// 定义触发 v-model 更新的事件
const emit = defineEmits(['update:modelValue'])

const onInput = (event) => {
  emit('update:modelValue', event.target.value)
}
</script>

<style scoped>
.ipt {
  border-width: 1.5px;
  border-style: solid;
  border-color: transparent;
  padding: 8px 16px;
  height: 42px;
  font-size: 16px;
  border-radius: 8px;
}

.ipt:focus {
  border-width: 1.5px;
  border-color: inherit;
}
</style>